
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
          media="(device-height: 568px)">
    <meta name="format-detection" content="telephone=no"/>
    <title>time picker</title>
    <link rel="stylesheet" href="../css/webpack_reset.css">
    <style>
        .date {
            width: 200px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid #d7d7d7;
            border-radius: 5px;
            color: #ff8a01;
            background: #fff;
            font-size: 18px;
        }

    </style>
    <!--lsloder build--><!--lsloder endbuild-->
</head>
<body>
<div id="date" class="date">请选择日期</div>
<!--js ls build-->
<script src='js/jquery.js'></script>
<!--js ls endbuild-->

<!--js ls build-->
<script src="js/lib/fastclick.js"></script>
<!--js ls endbuild-->

<!--js ls build-->
<script src="js/lib/gmu.js"></script>
<!--js ls endbuild-->


<!--js combo build-->
<script src="js/webpack/picker.js"></script>
<script src="js/webpack/timepicker.js"></script>
<!--js combo endbuild-->

<!--js inline build-->
<script>
    FastClick.attach(document.body);

    var $date = $('#date');

    $date.timePicker({
        title: '选择出行时间1',
        delay: 15,
        day: {
            len: 8,
            filter: ['今天'],
            format: 'M月d日'
        }
    }).on('timePicker.select', function (e, selectedTime, selectedText) {
        $(this).text(selectedText);
        console.log(selectedTime);
    }).on('timePicker.cancel', function () {
        console.log('user cancel');
    }).on('timePicker.change', function (e, selectedTime, selectedText) {
        console.log(selectedTime);
        console.log(selectedText);
    });

    $date.on('touchstart', function () {
        $(this).timePicker('show');
    });
</script>
<!--js inline endbuild-->

</body>
</html>